<template>
  <div class="flow">
    <div class="formLook">
      <div class="container">
        <div class="header">
          <!-- <span>入职办理</span> -->
          <TitleComponent title="入职办理" />
        </div>
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
          label-position="top"
          style="margin-left: 12px"
        >
          <el-form-item label="" prop="personPhoto">
            <div class="image-upload-container">
              <Upload
                :modelValue="form.personPhoto"
                :isShowTip="false"
                :fileType="photoFileType"
                @update:modelImage="uploadImage"
              ></Upload>
            </div>
          </el-form-item>
          <!-- <el-button type="primary"> 开通员工账号并生成工号 </el-button> -->
          <!-- 员工账号和工号 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="员工账号：" prop="userName">
                <el-input
                  v-model="form.userName"
                  placeholder="系统自动生成"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工号：" prop="jobNumber">
                <el-input
                  v-model="form.jobNumber"
                  placeholder="系统自动生成"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 基本信息 -->
          <!-- <el-divider content-position="left">基本信息</el-divider> -->
          <div class="section-title">
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="姓名：" prop="name">
                <el-input
                  disabled="true"
                  v-model="form.name"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别：" prop="sex">
                <el-select v-model="form.sex" placeholder="" disabled>
                  <el-option label="男" :value="0"></el-option>
                  <el-option label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄" prop="phoneNumber">
                <el-input
                  disabled="true"
                  v-model="form.phoneNumber"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="国籍：" prop="">
                <el-input disabled="true" placeholder=""></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="联系电话：" prop="phoneNumber">
                <el-input
                  disabled="true"
                  v-model="form.phoneNumber"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作邮箱：" prop="mail">
                <el-input
                  disabled="true"
                  v-model="form.mail"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="岗位名称：" prop="applicationPositonName">
                <el-input
                  disabled="true"
                  v-model="form.applicationPositonName"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="岗位性质：" prop="jobNature">
                <el-input
                  disabled="true"
                  v-model="form.jobNature"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- <el-col :span="6">
              <el-form-item label="岗位：">
                <el-button @click="selectJob">请选择岗位</el-button>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="部门：" prop="deptName">
                <el-input
                  disabled="true"
                  v-model="form.deptName"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职级：" prop="positionLevel">
                <el-select v-model="form.positionLevel" placeholder="职级">
                  <el-option
                    v-for="item in positionLevelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="直属领导">
                <el-select v-model="form.directLeaderId" placeholder="直属领导">
                  <el-option
                    v-for="item in leaderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最高领导">
                <el-select
                  v-model="form.supremeLeaderId"
                  placeholder="最高领导"
                >
                  <el-option
                    v-for="item in leaderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 工作信息 -->
          <!-- <el-divider content-position="left">工作信息</el-divider> -->
          <div class="section-title">
            <span>工作信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="入职类型：" prop="joinType">
                <el-radio-group v-model="form.joinType">
                  <!-- sys_info_jointype -->

                  <el-radio
                    v-for="dict in sys_info_jointype"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
                <!-- <el-radio label="social" :value="0">社会招聘</el-radio>
                  <el-radio label="graduate" :value="1">应届生</el-radio>
                  <el-radio label="intern" :value="2">实习生</el-radio> -->
                <!-- </el-radio-group> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预入职日期：">
                <el-date-picker
                  v-model="form.becomeJoinTime"
                  type="date"
                  placeholder=""
                  style="width: 100%"
                  disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- <el-form-item label="应聘渠道" prop="applicationSource">
                <el-select
                  clearable
                  v-model="form.applicationSource"
                  placeholder="可多选"
                  multiple
                  :multiple-limit="10"
                >
                  <el-option
                    v-for="item in applicationSourceList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item> -->

              <!-- 看新原型上进行修改 -->
              <!-- 是否存在对前单位的保密竞业限制 -->
              <el-form-item
                label="是否存在对前单位的保密竞业限制"
                prop="applicationSource"
              >
                <el-select clearable v-model="form.applicationSource">
                  <el-option
                    v-for="dict in sys_yes_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 薪资信息 -->
          <!-- <el-divider content-position="left">薪资信息</el-divider> -->
          <div class="section-title">
            <span>薪资信息</span>
          </div>
          <el-row :gutter="20">
            <!-- <el-col :span="8"> 
            <el-form-item label="社保方案：" prop="socialSecurityScheme">
                <el-select v-model="form.socialSecurityScheme" placeholder="">
                  <el-option label="方案一" value="1"></el-option>
                  <el-option label="方案二" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="薪资标准：" prop="salaryScale">
                <el-input
                  v-model="form.salaryScale"
                  placeholder=""
                  @input="validateNumber"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他补贴：" prop="otherSubsidy">
                <el-input
                  v-model="form.otherSubsidy"
                  placeholder=""
                  @input="otherSubsidyNumber"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 其他信息 -->
          <!-- <el-divider content-position="left">其他信息</el-divider> -->
          <div class="section-title">
            <span>其他信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  :rows="3"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="section-container">
            <div style="display: flex">
              <div class="section-title">
                <span>入职材料</span>
                <el-icon class="tip-icon" @click="toggleTip">
                  <!-- <QuestionFilled /> -->
                  <!-- <img
                    src="../../../../assets/images/Error circle.png"
                    alt=""
                  /> -->
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 18 18"
                    fill="none"
                  >
                    <g clip-path="url(#clip0_1525_7685)">
                      <rect width="18" height="18" fill="white" />
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M9 13.2338C8.60779 13.2338 8.28947 12.9382 8.28947 12.5451V12.5005C8.28947 12.1083 8.60779 11.79 9 11.79C9.39221 11.79 9.71053 12.1083 9.71053 12.5005C9.71053 12.8927 9.39221 13.2338 9 13.2338ZM8.28568 5.50232C8.28568 5.11011 8.604 4.79179 8.99621 4.79179C9.38842 4.79179 9.70674 5.11011 9.70674 5.50232V9.57505C9.70674 9.96726 9.38842 10.2856 8.99621 10.2856C8.604 10.2856 8.28568 9.96726 8.28568 9.57505V5.50232ZM9 0C4.03768 0 0 4.03768 0 9C0 13.9633 4.03768 18 9 18C13.9623 18 18 13.9633 18 9C18 4.03768 13.9623 0 9 0Z"
                        fill="#FFAE00"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1525_7685">
                        <rect width="18" height="18" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </el-icon>
              </div>

              <div class="legal-notice-container" v-if="showTip">
                <div class="legal-notice-content">
                  <p>
                    {{ materials }}
                    <!-- 用人单位扣押劳动者证件、要求担保或收取财物，违反《劳动合同法》第九条及第八十四条，将面临劳动行政部门警告、责令退还财物，并按每人500~2000元标准处以罚款；情节严重者，依法追究刑事责任，同时承担民事赔偿风险。 -->
                  </p>
                </div>
              </div>
            </div>
            <el-row
              :gutter="20"
              v-for="(item, index) in uploadItems"
              :key="item.field"
            >
              <el-col :span="24">
                <div class="document-container">
                  <el-form-item
                    :prop="item.field"
                    :rules="item.required ? rules[item.field] : []"
                    class="inline-form-item"
                  >
                    <div class="upload-wrapper">
                      <!-- 标签和上传按钮放在同一行 -->
                      <span class="document-label">
                        <div style="display: flex">
                          <span v-if="item.required" class="required-asterisk"
                            >*</span
                          >
                          <span class="asterisk"> {{ item.label }}： </span>
                          <div
                            v-if="item.whether == true"
                            style="display: flex"
                          >
                            <div>
                              <el-icon
                                class="tip-icon"
                                @click="legalTip(item, index)"
                              >
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  width="18"
                                  height="18"
                                  viewBox="0 0 18 18"
                                  fill="none"
                                >
                                  <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    d="M9 12.3517C8.6895 12.3517 8.4375 12.1178 8.4375 11.8065V11.7712C8.4375 11.4607 8.6895 11.2087 9 11.2087C9.3105 11.2087 9.5625 11.4607 9.5625 11.7712C9.5625 12.0817 9.3105 12.3517 9 12.3517ZM8.4345 6.231C8.4345 5.9205 8.6865 5.6685 8.997 5.6685C9.3075 5.6685 9.5595 5.9205 9.5595 6.231V9.45525C9.5595 9.76575 9.3075 10.0177 8.997 10.0177C8.6865 10.0177 8.4345 9.76575 8.4345 9.45525V6.231ZM9 1.875C5.0715 1.875 1.875 5.0715 1.875 9C1.875 12.9292 5.0715 16.125 9 16.125C12.9285 16.125 16.125 12.9292 16.125 9C16.125 5.0715 12.9285 1.875 9 1.875Z"
                                    fill="#007BFF"
                                  />
                                </svg>
                              </el-icon>
                            </div>

                            <!--  v-if="legalShowIndex==index" -->
                            <div class="hint-notice-container">
                              <div class="hint-notice-content">
                                <p>
                                  {{ item.describe }}
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </span>

                      <div style="width: 400px">
                        <UploadFile
                          :modelValue="form[item.field]"
                          :modelName="item.field"
                          :isShowTip="false"
                          :fileType="fileType"
                          class="inline-upload"
                          @update:modelValue="uploadFile"
                        ></UploadFile>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 应聘岗位弹窗 -->
          <PositionDialog
            ref="positionDialogRef"
            :department-options="buIdOptions"
            @confirm="handlePositionConfirm"
          />
          <!-- 按钮 -->
          <div class="button-group">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="saveForm">保存</el-button>
            <el-button @click="$GoBack()">取消</el-button>
          </div>
        </el-form>

        <!-- 入职根据岁数弹窗 -->
        <CommonAlertDialog
          v-model="showAgeWarning"
          title="风险提示"
          type="danger"
          :content="`系统检测到<strong>${employeeName}</strong>年龄未满16周岁，不符合录用条件！`"
          confirm-text="继续入职"
          cancel-text="取消操作"
          button-size="large"
        >
          <template #default>
            <div class="custom-warning">
              <el-alert type="error" :closable="false">
                根据劳动法规定，禁止雇佣未满16周岁员工
              </el-alert>
            </div>
          </template>
        </CommonAlertDialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import PositionDialog from "@/components/PositionDialog/index.vue";
import Upload from "@/components/FileUpload/phoTo.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import UploadFile from "@/components/FileUpload/index.vue";
import { seachPersonList } from "@/api/recruitment/needWorkers/index.js";
import {
  onboardingInfo,
  onboardingSave,
  onboardingSubmit,
} from "@/api/employeeRelations/onboarding.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import { formatDate } from "@/utils/index.js";
import { onMounted, reactive } from "vue";
import { QuestionFilled } from "@element-plus/icons-vue";
import CommonAlertDialog from "@/components/CommonAlertDialog/index.vue";
import { fetchKeyData } from "@/utils/api";
// 新增弹窗引用
const positionDialogRef = ref();
const showTip = ref(false);
const legalShowIndex = ref(-1);

const showClosePosition = ref(false);
const showAgeWarning = ref(false);
const employeeName = ref("张三");

const toggleTip = () => {
  showTip.value = !showTip.value;
};

const legalTip = (tip, index) => {
  console.log(tip, index);
  // 如果点击的是当前已显示的提示，则关闭；否则显示新提示
  legalShowIndex.value = legalShowIndex.value === index ? -1 : index;
};
const route = useRoute();
const { proxy } = getCurrentInstance();

const { sys_yes_no, sys_info_jointype } = proxy.useDict(
  "sys_yes_no",
  "sys_info_jointype"
);

const materials = ref(""); //入职材料弹窗提示

const Employment = ref(""); //就业许可手续
const specialPost = ref(""); //特殊岗位
const uploadItems = [
  {
    label: "体检报告",
    field: "physicalExaminationReport",
    required: "请上传体检报告",
  },
  {
    label: "离职证明",
    field: "resignationCertificate",
    required: "请上传离职证明",
  },
  {
    label: "入职声明",
    field: "employmentStatement",
    required: "请上传入职声明",
    whether: true,
    describe:
      "建议使用人事模板库中的入职声明模板，此模板经相关部门审核过，条款更加详细完善，有利于保证企业权益",
  },
  {
    label: "学位学历证书",
    field: "academicQualificationCertificate",
    required: "请上传学位学历证书",
  },
  {
    label: "特殊岗位资格证明",
    field: "qualificationCertificate",
    whether: true,
    describe: specialPost,
  },
  { label: "职业技能等级证书", field: "skillCertificate" },
  {
    label: "就业许可手续",
    field: "employmentPermit",
    whether: true,
    describe: Employment,
  },
];
const fileType = ref([
  "doc",
  "xls",
  "ppt",
  "txt",
  "pdf",
  "docx",
  "xlsx",
  "pptx",
  "docx",
]);
const formRef = ref(null);
const buIdOptions = reactive([]);
// 职级下拉框
const positionLevelOptions = reactive([
  {
    label: "初级",
    value: 0,
  },
  {
    label: "中级",
    value: 1,
  },
  {
    label: "高级",
    value: 2,
  },
]);
// 职级下拉框
const leaderOptions = reactive([]);
const form = reactive({
  personPhoto: "", //照片

  userName: "", //员工账号
  jobNumber: "", //员工工号
  name: "", //姓名
  sex: 0, //性别
  deptId: "", //任职部门id
  deptName: "", //任职部门名称
  phoneNumber: "", //电话
  mail: "", //邮箱
  applicationPositonName: "", //岗位名称
  jobNature: "", //岗位性质
  deptName: "", //部门
  positionLevel: "", //职级
  directLeaderId: "", //直属领导
  supremeLeaderId: "", //最高领导
  joinType: 0, //入职类型
  becomeJoinTime: "", //入职日期
  applicationSource: [], //应聘渠道
  socialSecurityScheme: "", //社保方案
  salaryScale: "", //性质标准
  otherSubsidy: "", //其他补贴
  remark: "", //备注
  // file: null,
  physicalExaminationReport: null,
  resignationCertificate: null,
  employmentStatement: null,
  academicQualificationCertificate: null,
  qualificationCertificate: null,
  skillCertificate: null,
  employmentPermit: null,
});

const rules = reactive({
  name: [{ required: true, message: "姓名", trigger: "blur" }],
  sex: [{ required: true, message: "性别", trigger: "change" }],
  phoneNumber: [{ required: true, message: "联系电话", trigger: "blur" }],
  mail: [
    { required: true, message: "工作邮箱", trigger: "blur" },
    { type: "mail", message: "正确的邮箱格式", trigger: "blur" },
  ],
  applicationPositonName: [
    { required: true, message: "岗位名称", trigger: "blur" },
  ],
  deptName: [{ required: true, message: "部门", trigger: "blur" }],
  becomeJoinTime: [{ required: true, message: "入职日期", trigger: "change" }],
  // file: [{ required: true, message: "请上传附件简历", trigger: "blur" }],
  physicalExaminationReport: [
    { required: true, message: "请上传体检报告", trigger: "blur" },
  ],
  resignationCertificate: [
    { required: true, message: "请上传离职证明", trigger: "blur" },
  ],
  employmentStatement: [
    { required: true, message: "请上传入职证明", trigger: "blur" },
  ],
  academicQualificationCertificate: [
    { required: true, message: "请上传学历学位证书", trigger: "blur" },
  ],
});

onMounted(async () => {
  seachPersonsList();
  if (route.query.id) {
    getOnboadingInfo(route.query.id);
  }

  try {
    const [permit, special, induction] = await Promise.all([
      fetchKeyData("riskKey", "员工key6"),
      fetchKeyData("riskKey", "员工key3"),
      fetchKeyData("riskKey", "员工key1"),
    ]);
    Employment.value = permit?.data?.[0]?.value || "";
    specialPost.value = special?.data?.[0]?.value || "";
    materials.value = induction?.data?.[0]?.value || "";
  } catch (error) {
    console.error("数据获取失败:", error);
  }
});
const seachPersonsList = async () => {
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "BMLD",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      leaderOptions.push({
        label,
        value,
      });
    });
  }
};
const getOnboadingInfo = async (id) => {
  const res = await onboardingInfo(id);
  if (res.data) {
    Object.keys(res.data).forEach((item) => {
      if (res.data[item]) {
        form[item] = res.data[item];
      }
    });
    form.positionLevel = Number(form.positionLevel);

    if (res.data.applicationSource) {
      form.applicationSource = res.data.applicationSource.split(",");
    }
  }
};

const selectJob = () => {
  positionDialogRef.value.open();
};

const handlePositionConfirm = (selected) => {
  form.applicationPositonName = selected.jobName;
  form.jobNature = selected.jobNature;
  form.deptId = selected.requireDeptId;
  form.deptName = selected.requireDeptName;
};
const saveForm = () => {
  ElMessageBox.confirm(`是否要保存这条入职申请?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      form.becomeJoinTime = formatDate(form.becomeJoinTime).dates;
      form.applicationSource = form.applicationSource.join(",");
      const res = await onboardingSave(form);
      if (res.code == 200) {
        ElMessage({
          message: "保存成功",
          type: "success",
        });

        proxy.$GoBack();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("请填写完整的入职信息");
      return;
    }

    showAgeWarning.value = true;

    try {
      // 添加预提交确认
      await ElMessageBox.confirm("是否要提交这条入职申请？", "提交确认", {
        confirmButtonText: "确认提交",
        cancelButtonText: "取消",
        type: "warning",
        distinguishCancelAndClose: true, // 区分取消和关闭
        closeOnClickModal: false, // 防止误触
      });

      // 数据预处理
      const submitData = {
        ...form,
        applicationSource: form.applicationSource?.join(",") || "",
        becomeJoinTime: formatDate(form.becomeJoinTime)?.dates || "",
      };

      // 提交请求
      const { code } = await onboardingSubmit(submitData);

      if (code === 200) {
        ElMessage.success({
          message: "入职申请提交成功，员工账号已生成",
          duration: 3000,
        });

        proxy.$GoBack();
      } else {
        // throw new Error("提交失败，服务器返回异常状态码");
      }
    } catch (error) {
      // 精准识别取消操作
      if (error === "cancel" || error === "close") {
        ElMessage.info("已取消提交操作");
        return;
      }

      // 其他异常处理
      console.error("提交异常:", error);
      // ElMessage.error(error.message || "提交失败，请检查网络或联系管理员");
    }
  });
};
const uploadImage = (files) => {
  console.log(files, "uploadImage");
  form.personPhoto = files;
};
const uploadFile = (files, fieldName) => {
  console.log(fieldName, "fieldName");
  form[fieldName] = files;
  // 这里可以添加统一的上传后处理逻辑
  console.log(`${fieldName} 上传完成`, files);
};

const validateNumber = (value) => {
  // 使用正则表达式过滤掉非数字字符
  form.salaryScale = value.replace(/[^0-9]/g, "");
};

const otherSubsidyNumber = (value) => {
  // 使用正则表达式过滤掉非数字字符
  form.otherSubsidy = value.replace(/[^0-9]/g, "");
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
}

.header {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.el-divider--horizontal {
  margin: 24px 0;
}

.button-group {
  margin-top: 20px;
  text-align: left;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  color: #606266;
}
.image-upload-container {
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 80px !important;
}
.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  color: #16191d;
  white-space: nowrap;
}

.document-label {
  /* display: flex; */
  /* align-items: center; */
}

.required-asterisk {
  color: #f56c6c;
  margin-left: 4px;
}
.asterisk {
  margin-left: 6px;
}

/* 调整上传按钮样式 */
.inline-upload :deep(.el-upload) {
  margin-left: 10px;
}

/* 调整上传组件内部按钮样式 */
.inline-upload :deep(.el-button) {
  margin-left: 0;
}
.section-container {
  position: relative;
}

.tip-icon {
  margin-left: 8px;
  color: #409eff;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s;
}

.tip-icon:hover {
  color: #79bbff;
}

.tip-content {
  max-width: 500px;
  /* line-height: 1.5; */
  /* padding: 8px; */
  font-size: 10px;
  /* background: red; */
}

.legal-notice-container {
  width: auto;
  border-radius: 4px;
  border: 1px solid #ffae00;
  background: #fff7e5;
  margin-left: 10px;
}

.legal-notice-content p {
  margin: 0;
  color: #ffae00;
  padding: 5px;
  font-weight: bold;
  font-size: 10px;
  line-height: 2;
  text-align: justify;
}

.hint-notice-container {
  border-radius: 4px;
  border: 1px solid #007bff;
  background: #e5f2ff;
  margin-left: 10px;
}

.hint-notice-content p {
  margin: 0;
  color: #007bff;
  padding: 5px;
  font-weight: bold;
  font-size: 10px;
  line-height: 1.6;
  text-align: justify;
}
</style>
